<template>
  <el-container direction="vertical">
  <Header/>
  <el-main style="width:85%;margin:auto;">
    <el-row>
      <el-col :span="12">
        <!-- 商品的大图 -->
        <!-- require() 方法来引入图片路径 -->
        <img v-if="good.img" :src="'http://127.0.0.1:3001/images/'+good.img" alt="" style="width:75%;height:30%">
      </el-col>
      <el-col :span="12">
        <!-- 商品的信息 -->
        <div class="message">
          <h2 style="color:black">{{good.name}}</h2>
          <p>商品编号：{{good.totalnum}}</p>
          <p style="font-size:22px;color:red">价格：￥{{good.price}}</p>
          <p class="cuxiao">商品介绍：{{good.msg}}</p>
          <p>库存：{{good.inventory}}</p>
          <hr>
          <p>购买数量：
            <el-input-number v-model="num" :min="1" label="描述文字"></el-input-number> &nbsp;
          </p>
          <p class="tihuo">提货： <br>
            <span>三亚</span> 机场离岛，最快6小时送达 <br>
            <span>海口</span> 机场、火车站、港口离岛，最快24小时送达 <br>
            <span>琼海</span> 机场离岛，最快40小时送达 <br>
            <span>注</span> 购买时间视配送仓库及下单时间而定，具体以系统提示的购买时效为准
          </p>
          <hr>
          <p class="bugbutton">
            <el-button type="danger" plain @click.prevent="addCart(good)">加入购物车</el-button>
          </p>
        </div>
      </el-col>
    </el-row>

    <el-row class="choosecard">
      <el-col>
        <!-- 选项卡 -->
        <el-tabs type="border-card">
        <el-tab-pane label="商品详情">
            <p>1.此紧致护理精华适于所有肌肤类型使用，将强效植萃成分与透明质酸复合成分相结合，密集浸润肌肤长达8小时，迷人香氛，促进肌肤焕活再生。</p>
            <p>2.专效御龄配方有助于显著紧实肌肤，恢复弹性。同时还为肌肤吸收后继护肤产品作好准备。</p>
            <p>3.丝滑质地深层渗透肌肤，更显盈弹柔韧。环保型包装设计使用至少25%的再生塑料。</p>
            <p>4.本产品的临床测试结果由全球60位不同肤质的女性男性得出，成分健康安全。</p>
        </el-tab-pane>
        <el-tab-pane label="售后服务">
            <p>1、订单中显示有“取消订单”按钮，可自行申请退货。</p>
            <p>2、若选择离岛自提或返岛自提，可在提货点退货，如对提货单据中的一个商品需要办理退货，则此提货单据上的全部商品都需办理退货（注：一个提货单号上所购全部商品全票退货）。退货时需将附件、说明书、发票、购物凭证、包装、商品、赠品一并返回我司办理退货手续。</p>
            <p>3、若不能自行操作取消订单，请致电客服电话0898-96656咨询。</p>
            <p>温馨提示：如产生退货，赠品需一并退回；您所购买的是受国家海关监管的免税品，若您未按时在提货点办理提货，且未联系客服办理退货业务，自离岛后30天起，订单将自动取消并退款，敬请谅解。</p>
        </el-tab-pane>
        <el-tab-pane label="常见问题">
            <p>购买免税品有什么要求？</p>
            <p>1、年满16周岁，乘飞机、火车或轮船，并持有效身份证件（线上商城仅支持国内居民身份证），离开海南本岛但不离境的国内旅客。</p>
            <p>2、免税限购额度：每个公历年内，免税额度为：单价人民币10万元以下商品，每年累计购物金额不超过人民币10万元（含10万元）。</p>
            <p>3、免税限购数量：单次限购化妆品30件（套装商品按包装内所含商品的实际件数计算额度 ），手机限购4部，酒类限购1500ml，其他品类不限件数。
                此外， 超出免税限额、限量的部分，照章征收进境物品进口税；单价人民币10万元以上商品征税后不限件数。
                部分品牌、商品有具体购买数量限制，请以商品详情提示为准。</p>
        </el-tab-pane>
       <el-tab-pane label="温馨提示">
        <p> 1.护肤品成分各有不同，敏感性肌肤的人士请先在耳后进行测试后再使用哦！</p>
        <p>2.因商品产地及批次不同，外包装会有所变化。商品功效及成分不变，请放心使用。</p>
        <p>3.因屏幕显示与实际商品可能存在色差，请以收到实际商品的颜色为准。</p>
        <p>4.产品中文名称请参考各产品外包装中文标签。</p>
       </el-tab-pane>
       </el-tabs>
      </el-col>
    </el-row>

  </el-main>

  <Footer/>
</el-container>
  
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
//导入json
import {mapState} from "vuex";

export default {
    data(){
    return{
      num:1,
      good:'', //存放1个商品对象
    };
  },
  components: {
    Header,
    Footer,
  },
  // created 生命周期钩子函数，用于在组件创建时执行代码
    created(){
     //获取商品展示页面的 路由参数中名为id的参数值
    let id = this.$route.query.id; 
    this.axios.post("/api/goods/goodsById", { gid: id }).then((res) => { //将商品id作为请求体中的gid参数传递
        this.good = res.data.data;
      })
      .catch((err) => {
        alert(err.message);
      });
  },
  methods:{
    // 添加购物车
    addCart(good){
      // 判断用户是否登录，未登录不允许添加购物车
      if(this.user == null){
        alert("请先登录!");
        //路由跳转到登录页面
        this.$router.push("/login");
      }else{
        let newGood={ //newGood对象
          uid:this.user.uid,
          gid:good.gid,
          num:this.num, //购买的数量
        } 
        this.axios.post("/api/carts/add", { good: newGood }).then((res) => { //将newGood作为请求体中的good参数传递
            if (res.data.code == 200) {
              this.$router.push("/cart");
            } else {
              alert(res.data.message);
            }
          }).catch((err) => {
            console.log(err);
          });
      }

    }
  },
   computed:{
    ...mapState("user",["user"])
  },
}
</script>

<style>
.tihuo span{
    display: inline-block;
    background-color: red;
    color: white;
    margin-left: 20px;
    margin-top: 5px;
    width: 50px;
    height:30px;
    line-height: 30px;
    text-align: center;
}
.cuxiao span{
    display: inline-block;
    background-color: red;
    color: white;
    width: 50px;
    height:30px;
    text-align: center;
    line-height: 30px;
}
.bugbutton .el-button{
    width: 250px;
    height:50px;
}
.message{
    color:#626061;
}
.choosecard{
    color:#626061;
    font-family:cursive;
    font-size: 18px;
}
</style>